<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { userUpdateInfoService, userUpdatePwdService } from '@/api/login/user'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
// 个人基础信息
const formModel = ref({
  id: '',
  avatar: '', // 头像
  nickname: '', // 昵称
  sex: '', // 性别
  birthday: '', //生日
  intro: '' // 介绍
})

formModel.value = { ...userStore.info }

const imageUrl = ref('')
imageUrl.value = formModel.value.avatar

// 上传文件成功
const handleAvatarSuccess = (res) => {
  imageUrl.value = res.data
  formModel.value.avatar = imageUrl.value
  ElMessage.success('上传成功')
}

const formRef = ref()
// 修改个人信息
const onSubmit = async () => {
  await userUpdateInfoService(formModel.value)
  userStore.getInfo()
  ElMessage.success('修改成功')
}

// 修改密码
const formPwd = ref({
  oldPwd: '',
  newPwd: '',
  rePwd: ''
})
const rulesPwd = {
  oldPwd: [
    { required: true, message: '请输入原密码', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9]{3,12}$/,
      message: '必须是3到12位字母或数字',
      trigger: 'blur'
    }
  ],
  newPwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9]{3,12}$/,
      message: '必须是3到12位字母或数字',
      trigger: 'blur'
    },
    {
      validator: (rule, value, ck) => {
        if (value === formPwd.value.oldPwd) {
          ck(new Error('新密码不能与原密码相同'))
        } else {
          ck()
        }
      }
    }
  ],
  rePwd: [
    { required: true, message: '请输入确定密码', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9]{3,12}$/,
      message: '必须是3到12位字母或数字',
      trigger: 'blur'
    },
    {
      validator: (rule, value, ck) => {
        if (value !== formPwd.value.newPwd) {
          ck(new Error('两次密码不一致'))
        } else {
          ck()
        }
      },
      trigger: 'blur'
    }
  ]
}
const formPwdRef = ref()
const onUpdatePwd = async () => {
  await formPwdRef.value.validate()
  await userUpdatePwdService(formPwd.value)
  ElMessage.success('修改成功')
  formPwdRef.value.resetFields()
}

defineOptions({
  name: 'UserInfo'
})
</script>
<template>
  <div class="user-info">
    <el-row>
      <!-- 个人基础信息 -->
      <el-col :span="12">
        <el-card style="max-width: 480px">
          <template #header>
            <div class="card-header">
              <span>个人资料</span>
            </div>
          </template>
          <el-form ref="formRef" :model="formModel" label-width="auto">
            <!-- 头像 -->
            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/upload"
                :show-file-list="false"
                method="post"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <!-- 昵称 -->
            <el-form-item label="昵称">
              <el-input v-model="formModel.nickname"></el-input>
            </el-form-item>
            <!-- 性别 -->
            <el-form-item label="性别">
              <el-radio-group v-model="formModel.sex">
                <el-radio value="1">男</el-radio>
                <el-radio value="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 生日 -->
            <el-form-item label="生日">
              <el-date-picker
                v-model="formModel.birthday"
                type="datetime"
                format="YYYY-MM-DD "
                value-format="YYYY-MM-DD "
              />
            </el-form-item>
            <!-- 介绍 -->
            <el-form-item label="介绍">
              <el-input v-model="formModel.intro" type="textarea" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">更新</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <!-- 修改密码 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>修改密码</span>
            </div>
          </template>
          <el-form
            ref="formPwdRef"
            :model="formPwd"
            status-icon
            :rules="rulesPwd"
            label-width="auto"
          >
            <el-form-item label="原始密码" prop="oldPwd">
              <el-input
                v-model="formPwd.oldPwd"
                type="password"
                autocomplete="off"
                :show-password="true"
              />
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
              <el-input
                v-model="formPwd.newPwd"
                type="password"
                autocomplete="off"
                :show-password="true"
              />
            </el-form-item>

            <el-form-item label="确定密码" prop="rePwd">
              <el-input
                v-model="formPwd.rePwd"
                type="password"
                autocomplete="off"
                :show-password="true"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onUpdatePwd">修改</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>
